<template>
	<link rel="stylesheet" type="text/css" media="print" href="/css/print-lock.css">
	<el-container>
		<el-header>
			<div >
				<div class="right-panel-search">
					<el-select filterable ref="procedure" placeholder="选择工序流程" v-model="procedure_id">
						<el-option v-for="item in procedures" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>

					<el-input v-model="gh_tmp" style="width: 200px;" placeholder="批量缸号"></el-input>
					<!-- <el-select filterable placeholder="请选择颜色" v-model="color">
						<el-option v-for="it in all_color" :label="it.value" :key="it.id" :value="it.value"></el-option>
					</el-select>

					<el-select filterable placeholder="选择尺码" v-model="size">
						<el-option v-for="it in all_size" :label="it.value" :key="it.id" :value="it.value"></el-option>
					</el-select> -->
					

					<el-button type="primary" icon="el-icon-plus" @click="addPrint">加一道打印</el-button>

					<el-button type="primary" icon="el-icon-printer" @click="printProcedure">打印工资单</el-button>

					<el-button type="primary" icon="el-icon-platform" @click="printOpen">打开打印软件</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="" style="text-align: center;">
			<el-card v-for="item in print_data" :key="item.id" class="print-card">
			    <template #header>
			      <div class="card-header">
			        
			      </div>
			    </template>
			    <el-row :gutter="30">
					<el-col :lg="6" :sm="10">
						<span style="font-size: 20px;">{{item.procedure_name}}</span>
					</el-col>
					<el-col :lg="3" :sm="10">
			    		<el-input type="number" placeholder="数量" v-model="item.number" />
			    	</el-col>
					<el-col :lg="4" :sm="10">
			    		<el-select style="width: 100%;"  filterable  placeholder="选择尺码" v-model="item.size">
							<el-option v-for="it in all_size" :label="it.value" :key="it.id" :value="it.value"></el-option>
						</el-select>
			    	</el-col>
			    	<el-col :lg="5" :sm="10">
			    		<el-select style="width: 100%;" filterable  placeholder="请选择颜色" v-model="item.color">
							<el-option v-for="it in all_color" :label="it.value" :key="it.id" :value="it.value"></el-option>
						</el-select>
			    	</el-col>
			    	<el-col :lg="4" :sm="10">
			    		<el-input placeholder="缸号" v-model="item.gh"/>
			    	</el-col>
			    	<el-col :lg="1" :sm="10">
			    		<el-button type="danger" size="" @click="delPrint(item.id)" icon="el-icon-delete"></el-button>
			    	</el-col>
			    </el-row>
			    <template #footer>ces</template>
			</el-card>
			<br>
			<el-button type="primary" icon="el-icon-printer" @click="printProcedure">打 印</el-button>
			<el-button  icon="el-icon-close" @click="printClose">取 消</el-button>
		</el-main>
	</el-container>
</template>

<script>
	import { hiprint } from "vue-plugin-hiprint";

	export default {
		name: 'listCrud',
		data() {
			return {
				procedures: [],
				all_sku: [],
				color: '',
				size: '',
				procedure_id: '',
				id: '',
				print_data: [],

				all_color: [],
				all_size: [],
				gh_tmp: '',
			}
		},
		mounted() {
			this.getIndex();
			hiprint.init({
			    //providers: [defaultElementTypeProvider()],
			});
		},
		methods: {
			async getIndex() {
				//获取颜色尺码
				var res = await this.$API.procedure.getAll.get()
				if (res.code == 200) {
					this.all_sku = res.skus
					this.procedures = res.data

					for (var i in this.all_sku) {
						if (this.all_sku[i].sku_name == '颜色') {
							this.all_color = this.all_sku[i].sku_values
						}

						if (this.all_sku[i].sku_name == '尺码') {
							this.all_size =	this.all_sku[i].sku_values
						}
					}
				}
			},
			ghtmp(gh, key) {
				if (this.gh_tmp) {
					var n = key + 1
					return this.gh_tmp + '-' + n
				} else {
					return ''
				}
			},
			addPrint() {
				if (!this.procedure_id) {
					return
				}
				var gh = ''
				var n = this.print_data.length + 1
				if (this.gh_tmp) {
					gh = this.gh_tmp + '-' + n
				}

				//添加打印数据
				var item = {
					color: this.color,
					size: this.size,
					procedure_id: this.procedure_id,
					procedure_name: this.$refs.procedure.selected.currentLabel,
					gh: gh,
					id: this.$TOOL.generateUUID(),
					number: '',
				}


				this.print_data.push(item)
			},
			delPrint(id) {
				for (var i in this.print_data) {
					if (this.print_data[i].id == id) {
						this.print_data.splice(i, 1)
					}
				}
			},
			printOpen() {
				window.open("hiprint://");
			},
			async printProcedure() {

				var confirmRes = await this.$confirm(`确定打印吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '打印',
					confirmButtonClass: 'el-button--primary'
				}).catch(() => {})

				if(!confirmRes){
					return false
				}

				// 上传打印数据
				var print_res = await this.$API.procedure.addPrintData.post({print_data: this.print_data});
				if (print_res.code == 200) {
					// 修改打印信息
					this.print_data = print_res.data
				} else {
					this.$alert(print_res.message, "提示", {type: 'error'})
					return
				}


				var res = await this.$API.printTmp.get.get({type: 'procedure'});
				var print_json = res.data.json_data
				var hiprintTemplate = new hiprint.PrintTemplate({
				    template: JSON.parse(print_json)
				});
				hiprintTemplate.print2(this.print_data)
				this.print_data = [];
			},
			async printClose () {
				var confirmRes = await this.$confirm(`确定取消打印吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '确定',
					confirmButtonClass: 'el-button--primary'
				}).catch(() => {})

				if(!confirmRes){
					return false
				}
				this.print_data = []
			}
		}
	}
</script>

<style>
	.print-card {
		margin-bottom: 15px; 
		max-width: 1000px; 
		margin: 0 auto
	}
	.print-card + .print-card {
		margin-top: 10px;
	}
</style>
